<template>
  <div>
    <el-card class="upload-content">
      <div slot="header">文档上传</div>

      <el-form :rules="rules">
        <el-form-item style="display:flex;" prop="document_url" label="文档">
          <UploadDocument />
        </el-form-item>
        <div class="publish-info">
          资金原因，只提供单个文件上传。<br />选中文件后，请点击按钮上传。
        </div>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header">基本设置</div>
      <el-form class="basic-setting" :model="documentForm" :rules="rules">
        <el-form-item prop="tag_ids">
          <div slot="label">
            标签
          </div>
          <el-tag
            :key="tag.id"
            v-for="tag in dynamicTags"
            closable
            style="margin-right:15px;"
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag.tag_name }}
          </el-tag>
          <el-button class="button-new-tag" size="small" @click="showTagDialog">
            <i class="el-icon-circle-plus-outline"></i>
            添加标签</el-button
          >
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
            maxlength="50"
            show-word-limit
            class="input"
            v-model="documentForm.title"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="content">
          <el-input
            class="input"
            type="textarea"
            v-model="documentForm.content"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="CustomBtn"
            style="margin-left:0.8rem"
            @click="publishDocument"
            >发布文档</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <TagDialog
      type="document"
      :ShowTagDialogVisible="ShowTagDialogVisible"
      @closeTagDialog="closeTagDialog"
    />
  </div>
</template>

<script>
import UploadDocument from '@/components/Tools/UploadDocument'
import TagDialog from '@/components/Article/TagDialog'
import { documentTip } from '@/utils/tip'
export default {
  props: {},
  components: {
    UploadDocument,
    TagDialog
  },
  data() {
    return {
      documentForm: {},
      documentTip: documentTip,
      ShowTagDialogVisible: false,
      dynamicTags: [],
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        document_url: [
          { required: true, message: '请上传文档', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    showTagDialog() {
      this.ShowTagDialogVisible = true
      this.$bus.$on('getTagsId', this.getTagList)
    },
    // 获取tag列表
    getTagList(item) {
      this.documentForm.tag_ids = item.tags_id
      // 重置数组
      this.dynamicTags = []
      let tagList = []
      item.tagList.forEach(tag => {
        tagList.push(tag)
      })
      this.dynamicTags.push(...tagList)
    },
    // 删除tag
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      let tagList = this.videoForm.tag_ids.split(',')
      console.log(tag)
      this.documentForm.tag_ids = tagList
        .filter(t => {
          return tag.id != t
        })
        .join(',')
    },
    // 发布视频
    async publishDocument() {
      // 整理数据
      this.documentForm.url = this.$store.state.document.document_url
      this.documentForm.referenced_urls = []
      this.documentForm.referenced_urls.push(this.documentForm.url)
      if (!this.documentForm.url) return this.$message.error('数据不全')
      const datas = this.$qs.stringify(this.documentForm)
      const res = await this.$API.document.PublishDocument(datas)
      if (res.status == 200) {
        this.$message.success('发布成功')
        this.$router.push('/document')
      } else {
        this.$message.error('发布失败')
      }
    },
    // 关闭tag标签窗口回调
    closeTagDialog() {
      this.ShowTagDialogVisible = false
    }
  }
}
</script>

<style scoped>
.upload-content {
  margin: 50px 0;
}
.basic-setting {
}
.input {
  width: 400px;
}
.publish-info {
  margin-bottom: 22px;
  margin-top: 22px;
  padding: 10px;
  line-height: 1.6em;
  background-color: #ddefff;
}
</style>
